<!--
 * @Description  : sample code for Vue3
 * @Version      : 1.0
 * @Author       : seraph
 * @Date         : 2024-12-12 11:35:03
 * @LastEditors  : seraph
 * @LastEditTime : 2024-12-26 22:32:13
-->
<template>
  <div id="nav">
    <div>
      <NavigationMenu />
    </div>
  </div>
  <div id="content">
    <router-view />
  </div>
</template>

<script lang="ts" setup>
import { RouterLink, useRouter } from 'vue-router'
import NavigationMenu from '@/components/NavigationMenu.vue';
// import DecalareResponse from '@/views/03.响应式基础/01. 声明响应状态/01.ref.vue'


</script>

<style scoped>
#nav {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #d1d1d1;
}

#nav span {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 120px;
  height: 100%;
  font-size: 16px;
  font-weight: bolder;
  text-decoration: none;
}

#nav span a {
  color: rgb(30, 30, 30);
  text-decoration: none;
}

#content {
  width: 1000px;
  height: 100%;
  display: block;
  align-items: top;
  background-color: rgb(245, 245, 245);
  margin: 0 auto auto auto;
  padding: 20px;
}
</style>
